import React, { Component } from 'react'
import api from '@MODULES/common/api'
import { NavLink, withRouter } from 'react-router-dom'
import { ListView, PullToRefresh } from 'antd-mobile';
import './css/shopList.less'



let ds
let page = 1

class Index extends Component {



    constructor(props) {
        super(props)



        ds = new ListView.DataSource({
            rowHasChanged: (row1, row2) => row1 !== row2,
        })


        this.state = {
            isLoading: false,
            checkList: props.content.data,
            hasMore: null,
        }

    }




    componentDidMount() {
    }


    onEndReached = () => {
        if (this.state.isLoading && !this.state.hasMore) {
            return;
        }
        this.setState({ isLoading: false });
        page = page + 1
        // this.requestListData()
    }


    render() {
        const { checkList } = this.state
        return (
            <ListView
                dataSource={ds.cloneWithRows(checkList)}
                renderFooter={!this.props.home ? () => (<div style={{ padding: 6, textAlign: 'center', fontSize: 10, color: process.theme['color-text-word'] }}>
                    {this.state.isLoading ? '加载中...' : '我是有底线的'}
                </div>) : null}
                renderRow={this.renderRow}
                style={{
                    height: this.props.content.listH,
                    overflow: 'auto',
                }}
                pageSize={4}
                scrollRenderAheadDistance={500}
                onEndReached={!this.props.home ? this.onEndReached : null}
                onEndReachedThreshold={10}

                pullToRefresh={<PullToRefresh
                    damping={60}
                    style={{
                        height: this.props.content.listH,
                        overflow: 'auto',
                    }}
                    indicator={{ deactivate: '上拉可以刷新' }}
                    direction='down'
                    refreshing={this.state.checkRefreshing}
                    onRefresh={() => {
                        this.setState({ checkRefreshing: true });
                        // this.updateList()
                    }}
                >
                </PullToRefresh>}
            />
        )
    }


    renderRow(rowData, sectionID, rowID) {
        return (
            <div className="shopList">
                <div className="shopImg" style={{
                    backgroundImage: 'url(' + rowData.img + ')'
                }}>

                </div>
                {/* <img className="shopImg" src={rowData.img} alt="" /> */}
                <span className="shopName">{rowData.name}</span>
                <span className="shopPrice">{rowData.price}</span>
            </div>
        )
    }
}
export default withRouter(Index)